<template>
  <div class="add_address">
    <van-field v-model="name" label="姓名" placeholder="请输入姓名" />
    <van-field
      v-model="tel"
      type="tel"
      label="联系电话"
      placeholder="请输入联系电话"
    />
    <van-field readonly label="地区" v-model="fieldValue" @click="show = true">
      <template #button>
        <van-icon name="location" size="0.4rem" color="#fc4141" />
      </template>
    </van-field>
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
        :field-names="fieldNames"
      />
    </van-popup>
    <van-field
      v-model="address"
      label="详细地址"
      placeholder="请填写具体地址"
    />
    <div class="setDafult">
      <van-checkbox
        v-model="checked"
        checked-color="#ee0a24"
        icon-size="0.35rem"
        >设置为默认地址</van-checkbox
      >
    </div>
    <div class="save" @click="InstantlySave">
      <van-button block color="#e93323">立即保存</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityList: null,
      show: false,
      name: "",
      tel: "",
      address: "",
      checked: false,
      cascaderValue: "",
      fieldValue: "请选择收货地址",
      addressId: null,
      fieldNames: {
        text: "n",
        value: "v",
        children: "c",
      },
      options: [],
      changeAddressInfo: null,
    };
  },
  methods: {
    InstantlySave() {
      if (this.name == "") {
        this.$toast("请输入姓名");
        return;
      } else {
        if (this.tel == "") {
          this.$toast("请输入联系电话");
        } else {
          var regResult = /^1[3456789]\d{9}$/.test(this.tel);
          if (!regResult) {
            this.$toast("请输入正确的手机号码");
          } else {
            if (this.fieldValue == "请选择收货地址") {
              this.$toast("请选择收货地址");
            } else {
              if (this.address == "") {
                this.$toast("请输入详细地址");
              } else {
                var adr = this.fieldValue.split(" ");
                if (this.$route.query.id) {
                  this.axios
                    .post("/api/address/del", {
                      id: this.changeAddressInfo.id,
                    })
                    .then(() => {
                      this.axios
                        .post("/api/address/edit", {
                          detail: this.address,
                          phone: this.tel,
                          real_name: this.name,
                          is_default: this.checked ? 1 : 0,
                          address: {
                            city: adr[1],
                            city_id: this.addressId,
                            province: adr[0],
                            district: adr[2],
                          },
                        })
                        .then((response) => {
                          if (response.data.status == 200) {
                            this.$router.push({
                          name:"add_manage",
                          params:{
                            msg:'修改成功',
                            flag:true,
                          }
                        });
                          }
                        });
                    });
                } else {
                  this.axios
                    .post("/api/address/edit", {
                      detail: this.address,
                      phone: this.tel,
                      real_name: this.name,
                      is_default: this.checked ? 1 : 0,
                      address: {
                        city: adr[1],
                        city_id: this.addressId,
                        province: adr[0],
                        district: adr[2],
                      },
                    })
                    .then((response) => {
                      if (response.data.status == 200) {
                        this.$router.push({
                          name:"add_manage",
                          params:{
                            msg:'添加成功',
                            flag:true,
                          }
                        });
                      }
                    });
                }
              }
            }
          }
        }
      }
    },
    onFinish({ selectedOptions }) {
      this.fieldValue = selectedOptions.map((option) => option.n).join(" ");
      this.addressId = selectedOptions[1].v;
      this.show = false;
    },
  },
  created() {
    this.axios.get("/api/city_list").then((response) => {
      this.cityList = response.data.data;
      this.options = this.cityList;
    });
    if (this.$route.query.id) {
      this.axios
        .get("/api/address/detail/" + this.$route.query.id)
        .then((response) => {
          this.changeAddressInfo = response.data.data;
          this.name = this.changeAddressInfo.real_name;
          this.tel = this.changeAddressInfo.phone;
          this.address = this.changeAddressInfo.detail;
          this.addressId = this.changeAddressInfo.city_id;
          this.checked = this.changeAddressInfo.is_default == 1 ? true : false;
          this.fieldValue =
            this.changeAddressInfo.province +
            " " +
            this.changeAddressInfo.city +
            " " +
            this.changeAddressInfo.district;
        });
    }
  },
};
</script>

<style lang="less">
.add_address {
  width: 100%;
  .setDafult {
    width: 100%;
    height: 44px;
    background-color: #fff;
    margin-top: 10px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    .van-checkbox__label {
      font-size: 14px;
    }
  }
  .save {
    width: 100%;
    padding: 0 15px;
    margin-top: 20px;
    .van-button--block {
      border-radius: 30px;
    }
  }
}
</style>